<template>
  <div class="bar-echart">
    <base-echarts :option="option" chartHeight="200px"></base-echarts>
  </div>
</template>

<script setup lang="ts">
/*
  xxx-echart 负责将options配置做单独组件的封装
*/
import { defineProps, computed } from "vue"
import BaseEcharts from "./Base-echarts.vue"
import * as echarts from "echarts"
import type { EChartsOption } from "echarts"

const props = defineProps<{
  xAxisData: string[]
  data: any[]
}>()

const option = computed<EChartsOption>(() => {
  return {
    grid: {
      top: "6%",
      left: "3%",
      right: "4%",
      bottom: "2%",
      // grid 区域是否包含坐标轴的刻度标签。（即坐标轴要在盒子里面）
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: props.xAxisData,
      axisLabel: {
        inside: true,
        color: "#fff"
      },
      z: 10
    },
    yAxis: {
      axisLabel: {
        color: "#999"
      }
    },
    dataZoom: [
      {
        type: "inside"
      }
    ],
    series: [
      {
        data: props.data,
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" }
            ])
          }
        }
      }
    ]
  }
})
</script>

<style lang="less" scoped></style>
